<template>
	<a-row>
		<!-- v-userAuth="'E5'" -->
		<a-row class='mytitle'>
			<!-- <a-icon :component = "osddm" style="margin:0 .5rem 0 0"/> -->
			{{ $t('OSD') }}
		</a-row>

		<NoAuthPage v-showNoAuth="'E5-1'" />

		<a-card style='margin:1em' :title="$t('OSD')" v-userAuth="'E5-1'">
			<template slot="extra"><!--创建OSD磁盘-->
				<a-button v-userAuth="'E5-9'" type="primary" @click="createOSD_dialog = true">
					<a-icon :component="addIcon" />{{ $t('Create-OSD') }}
				</a-button>
			</template>
			<div style="margin-bottom:1rem">
				<!--清洗-->
				<a-tooltip placement='bottom' v-userAuth="'E5-2'">
					<template slot='title'>
						<span>{{ $t('Clean') }}</span>
					</template>
					<a-button type='primary' @click="openmodal('cleanbtn')"
						:disabled="selectedRowKeys.length == 1 ? false : true">
						<!-- <i class="icon icon-clean16f"></i> -->
						<Iconfont class="icon" type="icon-clean16f"></Iconfont>
						{{ $t('Clean') }}
						<!-- <a-icon :component="clean"/> -->
					</a-button>
				</a-tooltip>
				<!--深层清洗-->
				<a-tooltip placement='bottom' v-userAuth="'E5-2'">
					<template slot='title'>
						<span>{{ $t('Deep-cleaning') }}</span>
					</template>
					<a-button type='primary' style="margin-left:1em" @click="openmodal('deepcleanbtn')"
						:disabled="selectedRowKeys.length == 1 ? false : true">
						<!-- <i class="icon icon-deepclean16f"></i> -->
						<Iconfont class="icon" type="icon-deepclean16f"></Iconfont>
						{{ $t('Deep-cleaning') }}
						<!-- <a-icon :component="deepclean"/> -->
					</a-button>
				</a-tooltip>
				<!--重设权重-->
				<a-tooltip placement='bottom' v-userAuth="'E5-3'">
					<template slot='title'>
						<span>{{ $t('Reset-weight') }}</span>
					</template>
					<a-button type='primary' style="margin-left:1em" @click="openmodal('weightbtn')"
						:disabled="selectedRowKeys.length == 1 ? false : true">
						<!-- <i class="icon icon-weight16f"></i> -->
						<Iconfont class="icon" type="icon-weight16f"></Iconfont>
						{{ $t('Reset-weight') }}
						<!-- <a-icon :component="weight"/> -->
					</a-button>
				</a-tooltip>
				<!--销毁osd三合一-->
				<a-tooltip placement='bottom' v-userAuth="'E5-4'">
					<template slot='title'>
						<span>{{ $t('Destroy') }} OSD</span>
					</template>
					<a-button :disabled="selectedRowKeys.length == 0" type='danger' style="margin-left:1em"
						@click="openmodal('destroybtn')">
						<!-- <a-icon :component="recyclebin"/> -->
						<!-- <i class="icon icon-delete16f"></i> -->
						<Iconfont class="icon" type="icon-delete16f"></Iconfont>
						{{ $t('Destroy') }} OSD
					</a-button>
				</a-tooltip>
				<!-- <a-tooltip placement='bottom'>设置寿命
	            <template slot='title'>
	                <span>{{$t('Set-life')}}</span>
	            </template>
	        	<a-button type='primary' style="margin-left:1em" @click="openmodal('timebtn')">
	        		<a-icon :component="lifetime"/>
	        	</a-button>
	        </a-tooltip> -->
				<!-- 更多 -->
				<a-dropdown :disabled="selectedRowKeys.length > 1 || selectedRowKeys.length == 0" v-if="isShowMoreBtnValue">
					<a-menu slot="overlay" style="text-align: center;">
						<a-menu-item key='1' v-if="ins == false" @click="openmodal('inbtn')">
							<a-tooltip placement='right' v-userAuth="'E5-5'">
								<template slot='title'>
									<span>{{ $t('Move-to-cluster') }}</span><!--移入集群-->
								</template>
								<a-icon :component="inform" class="downbtng" />
								<span>{{ $t('Move-to-cluster') }}</span><!--移入集群-->
							</a-tooltip>
						</a-menu-item>
						<a-menu-item key='2' v-if="ins == true" @click="openmodal('outbtn')">
							<a-tooltip placement='right' v-userAuth="'E5-6'">
								<template slot='title'>
									<span>{{ $t('Move-out-cluster') }}</span><!--移出集群-->
								</template>
								<a-icon :component="out" class="downbtn" />
								<span>{{ $t('Move-out-cluster') }}</span><!--移出集群-->
							</a-tooltip>
						</a-menu-item>
						<a-menu-item key='3' v-if="ups == false || selectedRowKeys.length == 0" @click="openmodal('upbtn')">
							<a-tooltip placement='right' v-userAuth="'E5-7'">
								<template slot='title'>
									<span>{{ $t('Enable') }} OSD</span><!--启用osd-->
								</template>
								<a-icon :component="up" class="downbtng" />
								{{ $t('Enable') }} OSD
							</a-tooltip>
						</a-menu-item>
						<a-menu-item key='4' v-if="ups == true || selectedRowKeys.length == 0" style="margin-top: ;"
							@click="openmodal('downbtn')">
							<a-tooltip placement='right' v-userAuth="'E5-8'">
								<template slot='title'>
									<span>{{ $t('Disable') }} OSD</span><!--停用osd-->
								</template>
								<a-icon :component="down" class="downbtn" />
								<span>{{ $t('Disable') }} OSD</span><!--停用osd-->
							</a-tooltip>
						</a-menu-item>
						<!--丢失OSD-->
						<!-- <a-menu-item key='5' v-if="ups == false || selectedRowKeys.length==0">
						<a-tooltip placement='right'>
							<template slot='title'>
								<span>{{$t('Lost')}} OSD</span>
							</template>
							<a-button type='primary' style="margin-left:1em" @click="openmodal('recyclebtn')" class="downbtn">
								<a-icon :component="recyclebin"/>
							</a-button>
						</a-tooltip>
                    </a-menu-item> -->
						<!--清除OSD-->
						<!-- <a-menu-item key='6' v-if="ups == false || selectedRowKeys.length==0">
						<a-tooltip placement='right'>
							<template slot='title'>
								<span>{{$t('Clear')}} OSD</span>
							</template>
							<a-button type='primary' style="margin-left:1em" @click="openmodal('eliminatebtn')" class="downbtn">
								<a-icon :component="eliminate"/>
							</a-button>
						</a-tooltip>
                    </a-menu-item> -->
						<!--销毁OSD-->
						<!-- <a-menu-item key='7' v-if="ups == false || selectedRowKeys.length==0">
						<a-tooltip placement='right'>
							<template slot='title'>
								<span>{{$t('Destroy')}} OSD</span>
							</template>
							<a-button type='primary' style="margin-left:1em" @click="openmodal('delbtn')" class="downbtn">
								<a-icon :component="del"/>
							</a-button>
						</a-tooltip>
                    </a-menu-item> -->
					</a-menu>
					<a-button type='primary' style="margin-left:1em">
						{{ $t('More') }}
						<a-icon type='down'></a-icon>
					</a-button>
				</a-dropdown>
			</div>
			<a-table class="bigtab" :columns='diskcolumns'
				:rowSelection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }' :dataSource='diskdata'
				:loading="loading" size='small' bordered :pagination='pagination' :rowKey="(record) => record.osd_id"
				:components="tableComponents" :locale="defaultSetting"><!--type:"radio",-->
				<template slot="status" slot-scope="status">
					<a-tag :color='status.in == true ? "var(--mainGreenColor)" : "var(--mainRedColor)"'
						style="width:53.36px;text-align:center">{{ status.in == true ? 'IN' : 'OUT' }}</a-tag>
					<a-tag :color='status.up == true ? "var(--mainGreenColor)" : "var(--mainRedColor)"'
						style="width:53.36px;text-align:center">{{ status.up == true ? 'UP' : 'DOWN' }}</a-tag>
				</template>
				<template slot="type" slot-scope="text, record">
					<span v-if="text == 0">SSD</span>
					<span v-else-if="text == 1">HDD</span>
					<span v-else-if="text == 2">NVME</span>
					<span v-else>unknown</span>
				</template>
				<template slot="diskUsage" slot-scope="text, record">
					<div class="disk-usage">
						<span v-if="text == 0">{{ $t('Data-disk') }}</span>
						<span v-else-if="text == 1">{{ $t('Cache-disk') }}</span>
						<!-- <span @click="changeDiskUsage">编辑</span> -->
					</div>
				</template>
				<!-- 容量标题 -->
				<template slot="capacityTitle">
					{{ this.$t('Capacity') }}
					<a-tooltip>
						<template slot="title">
							{{ $t('Nanotube-capacity') }}
						</template>
						<a-icon type="question-circle" />
					</a-tooltip>
				</template>
			</a-table>
		</a-card>
		<!-- 重设权重 -->
		<a-modal :title="$t('Reset-weight')" v-model='weightbtn' @cancel='cancelhandle' width='35%' @ok='btnsub'
			:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form'>
				<a-form-item :label="$t('Weight')" v-bind='formlayout'>
					<a-input-number :min="0" :max="1" :step="0.01" v-decorator="['weightbtn', {
						rules: [{ required: true, message: $t('Enter') + $t('Weight') }]
					}]" style="width: 100%;" :placeholder="$t('Enter') + $t('Weight')">
					</a-input-number>
				</a-form-item>
			</a-form>
		</a-modal>
		<a-modal :title="$t('Set-life')" v-model='timebtn' @cancel='cancelhandle' width='35%' @ok='timeok'
			:cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form2'>
				<a-form-item :label="$t('Death-date')" v-bind='formlayout'>
					<a-date-picker @change="onChange" style="width: 100%;"
						v-decorator="['life', { rules: [{ required: true, message: $t('Choose') + $t('Set-life') }] }]" />
				</a-form-item>
			</a-form>
		</a-modal>

		<!--销毁osd-->
		<a-modal :visible="destroybtn" :maskClosable='false' width='30%' @cancel="cancelhandle2" v-dragModal>
			<template slot="title">
				<img class="error-img" src="../../../../static/images/disk_check/16_f_ic_unsure.png" alt="unsure_img" />
				<span class="weight">{{ $t('Release-and-set2') }}</span>
			</template>
			<div v-if="$store.state.language == 'zh'" style="color:#333">
				释放数据后，该磁盘上的数据将由系统分配到其他缓存盘，您可到节点信息页面找到本磁盘。
				<div>
					<span class="font-red">此操作为危险操作，一旦误删，可能会导致系统崩溃或数据丢失，请谨慎操作！</span>
					如您确定要进行操作，请输入以下文字后点击确定。
				</div>
			</div>
			<div v-else style="color:#333">
				After releasing the data, the data on this disk will be allocated to other cache disks by the system. You
				can find this disk on the node information page.
				<div>
					<span class="font-red">This operation is a dangerous operation. Once it is deleted by mistake, it may
						lead to system crash or data loss. Please operate with caution!</span>
					If you are sure to operate, please enter the following text and click OK.
				</div>
			</div>
			<div class="sure-text">{{ $t('Know-and-continue') }}</div>
			<a-input v-model="confirmValue" :placeholder="$t('Enter-top-text')"></a-input>
			<template slot="footer">
				<a-button key="back" @click="cancelhandle2" style="width: 80px;">
					{{ $t('Cancel') }}
				</a-button>
				<a-button key="submit" type="primary" id="destroy-btn" @click="handleDestroyOSD" :loading="delOsdSpinning"
					:disabled="(confirmValue == '我已知情，确定要继续操作！' || confirmValue == 'I have been informed and am sure to continue!') ? false : true">
					{{ $t('Sure') }}
				</a-button>
			</template>
		</a-modal>

		<!--更改磁盘用途-->
		<!-- <a-modal
			:visible="changeDiskUsage_dialog"
			:maskClosable='false'
			width='30%'
			@cancel="()=>changeDiskUsage_dialog=false"
			>
			<template slot="title">
				<i>提示图标</i>
				<span class="weight">{{$t('Change-disk-usage')}}</span>
			</template>
			<div v-if="$store.state.language=='zh'">
				<div>当前磁盘用途为：<span style="font-weight:700">缓存盘</span></div>
				<div style="margin-left:15px">是否确定改为：<span style="color:#006db8;font-weight:700">数据盘</span></div>
			</div>
			<div v-else>
				<div>Current disk usage is：<span style="font-weight:700">Cache disk</span></div>
				<div style="margin-left:15px">Are you sure to change to：<span style="color:#006db8;font-weight:700">Data disk</span></div>
			</div>
			<template slot="footer">
				<a-button key="back" @click="()=>changeDiskUsage_dialog=false">
				{{$t('Cancel')}}
				</a-button>
				<a-button key="submit" type="primary" id="disk-warn-btn" @click="handleChangeDiskUsage">
				{{$t('Sure')}}
				</a-button>
			</template>
		</a-modal> -->

		<CreateOSD :visible="createOSD_dialog" @closeDialog="closeDialog" :activeDisk="activeDisk"
			@resetActiveDisk="resetActiveDisk" />
	</a-row>
</template>
<script>
// import osddm from '../../../../static/images/svg/ic_OSDDM_normal.svg'
// import clean from '../../../../static/images/svg/ic_clean_normal.svg'
// import deepclean from '../../../../static/images/svg/ic_deepclean_normal.svg'
// import weight from '../../../../static/images/svg/ic_weight_normal.svg'
// import lifetime from '../../../../static/images/svg/ic_lifetime_normal.svg'
import inform from '../../../../static/images/svg/ic_in_normal.svg'
import out from '../../../../static/images/svg/ic_out_normal.svg'
import up from '../../../../static/images/svg/ic_up_normal.svg'
import down from '../../../../static/images/svg/ic_down_normal.svg'
// import recyclebin from '../../../../static/images/svg/ic_recyclebin_normal.svg'
// import eliminate from '../../../../static/images/svg/ic_eliminate_normal.svg'
// import del from '../../../../static/images/svg/ic_delete_normal.svg'
import addIcon from '../../../../static/images/svg/ic_add_normal.svg'
// import { fstat } from 'fs'
import VueDraggableResizable from 'vue-draggable-resizable'
import EmptyData from '@/components/common/EmptyData'
import CreateOSD from '@/views/operation/osddisk/oper/CreateOSD'
import NoAuthPage from '@/components/common/NoAuthPage'
import request from '@/request/request'

export default {
	name: 'diskmgr',
	components: {
		VueDraggableResizable, EmptyData, CreateOSD, NoAuthPage
	},
	template: '<a-icon :component = "inform,out,up,down,addIcon" />',//osddm,lifetime,clean,deepclean,eliminate,del,weight,recyclebin
	data() {
		this.tableComponents = {
			header: {
				cell: (h, props, children) => {
					const { key, ...restProps } = props
					// 此处的this.columns 是定义的table的表头属性变量
					const col = this.diskcolumns.find((col) => {
						const k = col.dataIndex || col.key
						return k === key
					})
					if (!col || !col.width) {
						return h('th', { ...restProps }, [...children])
					}
					const dragProps = {
						key: col.dataIndex || col.key,
						class: 'table-draggable-handle',
						attrs: {
							w: 10,
							x: col.width,
							z: 1,
							axis: 'x',
							draggable: true,
							resizable: false,
						},
						on: {
							dragging: (x, y) => {
								col.width = Math.max(x, 1)
							},
						},
					}
					const drag = h('vue-draggable-resizable', { ...dragProps })
					return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
				}
			}
		}
		return {
			form: this.$form.createForm(this),
			form2: this.$form.createForm(this),
			// osddm,
			// clean,
			// deepclean,
			// weight,
			// lifetime,
			inform,
			out,
			up,
			down,
			// recyclebin,
			// eliminate,
			// del,
			addIcon,
			weightbtn: false,
			timebtn: false,
			diskcolumns: [
				{ title: this.$t('Node'), dataIndex: 'hostname', key: 'hostname', width: 100, sorter: this.nodeSortFun },
				{ title: 'OSD-ID', dataIndex: 'osd_id', key: 'osd_id', width: 100, sorter: (a, b) => a.osd_id - b.osd_id },
				{ title: this.$t('Disk-identify'), dataIndex: 'drive_letter', key: 'drive_letter', width: 100, },
				{ title: this.$t('Status'), dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' }, width: 120 },
				{ title: this.$t('Phy-disk-type'), dataIndex: 'type', key: 'type', width: 100, scopedSlots: { customRender: 'type' } },
				{ title: 'PG' + this.$t('Amount'), dataIndex: 'numpg', key: 'numpg', width: 100 },
				{ slots: { title: 'capacityTitle' }, dataIndex: 'size', key: 'size', width: 100 },// title:this.$t('Capacity')
				{ title: this.$t('Usage-rate'), dataIndex: 'usage', key: 'usage', width: 100, sorter: this.useSort },
				{ title: this.$t('Disk-usage'), dataIndex: 'is_cache', key: 'is_cache', width: 100, scopedSlots: { customRender: 'diskUsage' }, },
				// {title:this.$t('Equipment-model'),dataIndex:'devid',key:'devid',width:160},
				// {title:this.$t('Erasing-times'),dataIndex:'host_write',key:'host_write'},
				// {title:this.$t('Path'),dataIndex:'locat',key:'locat',width:120},
				// {title:this.$t('Life-expectancy'),dataIndex:'lifetime',key:'lifetime'}
			],
			ids: '',
			uuids: '',
			ins: '',
			ups: '',
			selectedRowKeys: [],
			pagination: {
				defalutPageSize: 10,
				showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
				showSizeChanger: true,
				pageSizeOptions: ['10', '20', '30', '40'],
				onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
				buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
			},
			formlayout: {
				labelCol: { span: 6 },
				wrapperCol: { span: 14 }
			},
			diskdata: [],
			// test:{},
			loading: true,
			spinning: false,
			target2: '',
			defaultSetting: { emptyText: <EmptyData /> },
			destroybtn: false,
			confirmValue: '',
			selectedRows: [],
			// changeDiskUsage_dialog: false,
			createOSD_dialog: false,
			delOsdSpinning: false,
			hasDiskId: false,
			activeDisk: -1,
			isShowMoreBtnValue: false,
			timer: null,
		}
	},
	computed: {
		getlanguage() {
			return this.$store.state.language
		}
	},
	watch: {
		getlanguage(val) {
			this.diskcolumns = [
				{ title: this.$t('Node'), dataIndex: 'hostname', key: 'hostname', width: 100, sorter: this.nodeSortFun },
				{ title: 'OSD-ID', dataIndex: 'osd_id', key: 'osd_id', width: 100, sorter: (a, b) => a.osd_id - b.osd_id },
				{ title: this.$t('Disk-identify'), dataIndex: 'drive_letter', key: 'drive_letter', width: 100, },
				{ title: this.$t('Status'), dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' }, width: 120 },
				{ title: this.$t('Phy-disk-type'), dataIndex: 'type', key: 'type', width: 100, scopedSlots: { customRender: 'type' } },
				{ title: 'PG' + this.$t('Amount'), dataIndex: 'numpg', key: 'numpg', width: 100 },
				{ slots: { title: 'capacityTitle' }, dataIndex: 'size', key: 'size', width: 100 },// title:this.$t('Capacity')
				{ title: this.$t('Usage-rate'), dataIndex: 'usage', key: 'usage', width: 100, sorter: this.useSort },
				{ title: this.$t('Disk-usage'), dataIndex: 'is_cache', key: 'is_cache', width: 100, scopedSlots: { customRender: 'diskUsage' }, },
				// {title:this.$t('Equipment-model'),dataIndex:'devid',key:'devid',width:160},
				// {title:this.$t('Erasing-times'),dataIndex:'host_write',key:'host_write'},
				// {title:this.$t('Path'),dataIndex:'locat',key:'locat',width:120},
				// {title:this.$t('Life-expectancy'),dataIndex:'lifetime',key:'lifetime'}
			]
		}
	},
	mounted() {
		this.getdata();
		this.isShowMoreBtn();
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
	},
	methods: {
		//只有查看权限的时候，不显示更多按钮
		isShowMoreBtn() {
			let auth = JSON.parse(localStorage.getItem('tags'));
			if (auth.indexOf('E5-1') != -1) {//有查看OSD磁盘权限
				let count = 0;
				let moreBtnAuth = ['E5-5', 'E5-6', 'E5-7', 'E5-8'];
				auth.some(item => {
					//有移入集群、移出集群、启用OSD、停用OSD任意一个
					if (moreBtnAuth.indexOf(item) != -1) {
						count++;
						return true;
					}
				})
				if (count > 0) {
					this.isShowMoreBtnValue = true;
				} else {
					this.isShowMoreBtnValue = false;
				}
			}
		},

		getdata() {
			this.loading = true
			let disk_id = this.$store.state.operOSDData;
			console.log(disk_id)
			let operOSDType = this.$store.state.operOSDType;
			let disk_id_copy = disk_id;
			if (disk_id == -1 || operOSDType == 'active') {
				disk_id_copy = undefined;
			}
			request('get', 'ops/osd/', {
				// params: { 
				disk_id: disk_id_copy
				// }
			}).then(res => {
				// console.log('osd',res)
				if (res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				} else {
					if (disk_id != -1) {
						if (operOSDType == 'noActive') { //置为未激活,销毁OSD
							this.hasDiskId = true;
							res.data.forEach((item, index) => {
								if (item.choice) {
									this.selectedRowKeys.push(item.osd_id);
								}
							})
							if (!res.data.every((item) => !item.choice)) this.destroybtn = true
						} else { //激活盘操作，即创建OSD
							// console.log('2222222222', disk_id)
							this.activeDisk = disk_id;
							this.createOSD_dialog = true;
						}
						this.$store.commit('goToOsd', {
							type: '',
							currentData: -1
						})
					}
					for (const item of res.data) {
						// item.avail = this.bytesToSize(item.avail)
						// item.usage = item.usage
						item.host_write = this.bytesToInt(item.host_write)
					}
					this.diskdata = res.data
				}
				// this.selectedRowKeys = []; // 将选择的项清空
			}).catch(err => {
				this.loading = false
			}).finally(() => {
				this.loading = false
			})
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			for (const item of this.diskdata) {
				if (selectedRowKeys == item.osd_id) {
					this.target2 = item;
					this.target = item.hostname
					this.ids = item.osd_id.toString()
					// this.uuids = item.uuid
					this.ins = item.status.in
					this.ups = item.status.up
				}
			}
			// this.target = this.diskdata[selectedRowKeys].node
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows;
			if (this.selectedRowKeys.length == 0) {//表格多选时加的
				this.ins = false
			}
		},
		openmodal(name) {
			if (this.selectedRowKeys.length != 0) {
				if (name == 'cleanbtn')
					this.cleanbtn()
				else if (name == 'deepcleanbtn')
					this.deepcleanbtn()
				else if (name == 'outbtn')
					this.outbtn()
				else if (name == 'inbtn')
					this.inbtn()
				else if (name == 'upbtn')
					this.upbtn()
				else if (name == 'downbtn')
					this.downbtn()
				else if (name == 'recyclebtn')
					this.recyclebtn()
				else if (name == 'eliminatebtn')
					this.eliminatebtn()
				else if (name == 'delbtn')
					this.delbtn()
				else if (name == 'weightbtn')
					this.weightbtn = true
				else if (name == 'timebtn')
					this.timebtn = true
				else if (name == 'destroybtn')
					this.destroybtn = true;
			}
			else {
				this.$notification['error']({
					message: this.$t('Choose') + this.$t('Operating-object')
				})
			}
		},
		cleanbtn() {//清洗
			let _this = this
			this.$confirm({
				title: this.$t('Clean') + 'OSDs',
				content: this.$t('Sure-to') + this.$t('Data-clean') + 'OSD-' + this.target2.osd_id + " ？",
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/scrub', {
						id: _this.ids,
						is_deep: false
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getdata();
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		deepcleanbtn() {//深层清洗
			let _this = this
			this.$confirm({
				title: this.$t('Deep-cleaning') + 'OSDs',
				content: this.$t('Sure-to') + this.$t('Data-clean') + '（' + this.$t('Deep-cleaning') + '）' + 'OSD-' + this.target2.osd_id + " ？",
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/scrub', {
						id: _this.ids,
						is_deep: true
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getdata();
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		timeok(e) {
			e.preventDefault();
			this.form2.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					request('post', 'ops/osd/set_life', {
						id: this.ids,
						node: this.target,
						life: value.life.format('YYYY-MM-DD')
					}).then(res => {
						this.getdata();
						this.selectedRowKeys = []; // 将选择的项清空
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
						this.timebtn = false
						this.form2.resetFields();
					})
				}
			})
		},
		outbtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Move-out-cluster'),
				content: this.target + ' osd.' + this.ids + ' ' + this.$t('Will_be_marked') + this.$t('Move-out-cluster'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/out', {
						id: _this.ids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						//   _this.gettask()  //任务栏信息
						_this.ins = false
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		inbtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Move-to-cluster'),
				content: this.target + ' osd.' + this.ids + ' ' + this.$t('Will_be_marked') + this.$t('Move-to-cluster'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/_in', {
						id: _this.ids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						//   _this.gettask()  //任务栏信息
						_this.ins = true
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},

		//启用OSD
		upbtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Enable') + ' OSD',
				content: this.target + ' osd.' + this.ids + ' ' + this.$t('Will_be_marked') + this.$t('Enable'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/up', {
						id: _this.ids,
						node: _this.target,
						// uuid:_this.uuids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						// _this.test = res.data
						// _this.$store.commit('gettips', {
						// 	tipslist: res.data,
						// })
						_this.ups = true
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		//禁用OSD
		downbtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Disable') + ' OSD',
				content: this.target + ' osd.' + this.ids + ' ' + this.$t('Will_be_marked') + this.$t('Disable'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/down', {
						id: _this.ids,
						node: _this.target,
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.ups = false
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		recyclebtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Lost') + ' OSD',
				content: this.target + this.$t('Will_be_marked') + this.$t('Lost'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/lost', {
						id: _this.ids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},
		eliminatebtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Clear') + ' OSD',
				content: this.target + this.$t('Will_be_cleared'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/purge', {
						id: _this.ids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					//   console.log('cancel')
				}
			})
		},

		delbtn() {
			let _this = this
			this.$confirm({
				title: this.$t('Destroy') + ' OSD',
				content: this.target + this.$t('Will_be_marked') + this.$t('Destroy'),
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'ops/osd/destroy', {
						id: _this.ids
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getdata()
						_this.selectedRowKeys = []; // 将选择的项清空
					})
				},
				onCancel() {
					// console.log('cancel')
				}
			})
		},

		cancelhandle(e) {
			this.trash = false
			this.spinning = false
			this.form.resetFields();
			this.form2.resetFields();
		},

		//取消销毁osd
		cancelhandle2(e) {
			this.destroybtn = false;
			this.delOsdSpinning = false;
			this.confirmValue = '';
		},

		// 重设权重
		btnsub(e) {
			e.preventDefault();
			this.form.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					request('post', 'ops/osd/reweight', {
						id: this.ids,
						weight: value.weightbtn
					}).then(res => {
						this.getdata();
						this.selectedRowKeys = []; // 将选择的项清空
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
						this.weightbtn = false
						this.form.resetFields();
					})
				}
			})
		},
		onChange(date, dateString) {
			//   console.log(date, dateString);
		},

		//整数规范
		bytesToInt(limit) {
			let size = "";
			if (limit > 1000) { //如果小于0.1KiB转化成B
				size = (limit / 1000).toFixed(1) + " K";
			}
			let sizestr = size + "";
			let len = sizestr.indexOf("\.");
			let dec = sizestr.substr(len + 1, 2);
			if (dec == "00") {//当小数点后为00时 去掉小数部分
				return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
			}
			return sizestr;
		},

		//节点排序
		nodeSortFun(a, b) {
			let num1 = String(a.hostname).slice(-1);
			let num2 = String(b.hostname).slice(-1);
			num1 = Number(num1);
			num2 = Number(num2);
			return num1 - num2;
		},

		//使用率排序
		useSort(a, b) {
			let num1 = parseFloat(a.usage);
			let num2 = parseFloat(b.usage);
			return num1 - num2;
		},

		//确定销毁OSD
		handleDestroyOSD() {
			let finalData = [];
			if (this.hasDiskId) {//是否是置为未激活的按钮跳转过来的
				console.log('diskData', this.diskdata)
				console.log('selectedRowKeys', this.selectedRowKeys)
				this.diskdata.forEach(item => {
					if (this.selectedRowKeys.indexOf(item.osd_id) != -1) {
						finalData.push(item);
					}
				})
			} else {
				finalData = this.selectedRows;
			}
			this.delOsdSpinning = true;
			let delArr = [];
			const idList = finalData.map(item => {
				delArr.push({
					osd_id: item.osd_id,
					disk_id: item.disk_id,
					is_cache: item.is_cache
				})
				return item.osd_id
			})
			request('DELETE', 'ops/osd/', {
				// data: {
				del_args: delArr
				// }
			}).then(res => {
				// console.log('销毁OSD', res);
				this.model(res.data.id) //返回模板
				this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				this.cancelhandle2();
				// this.delOsdSpinning = false;
				if (res.data.flag == 0) {
					this.hasDiskId = false;
					this.timer = setInterval(async () => {
						const { data } = await this.$api.task.getRecentTaskApi()
						if (data[0].params.osd_ids) {
							if (idList.sort().toString() === data[0].params.osd_ids.sort().toString()) {
								this.getdata();
								this.selectedRowKeys = []
								clearInterval(this.timer)
								this.timer = null
							}
						}
					}, 1000)
				}
			}).catch(err => {
				console.log(err);
			}).finally(() => {
				this.delOsdSpinning = false;
			})
		},

		//关闭创建OSD弹窗
		closeDialog() {
			this.createOSD_dialog = false;
			this.activeDisk = -1;
		},

		resetActiveDisk() {
			this.activeDisk = -1;
		},

		//更改磁盘用途
		// changeDiskUsage() {
		// 	this.changeDiskUsage_dialog = true;
		// },
		//确定更改磁盘用途
		// handleChangeDiskUsage() {
		// 	if(成功) {
		// 		const key = `open${Date.now()}`;
		// 		this.$notification.open({
		// 			message: this.$store.state.language=='zh'?'磁盘用途更改成功':'Disk usage changed successfully',
		// 			description: this.$store.state.language=='zh'?
		// 			`更改磁盘用途后，系统将自动对磁盘上存储的数据进行重新安排，此过程在后台静默运行，为保障系统稳定性，我们强烈建议您不要立即进行磁盘拔插的操作，具体等待时间视系统情况
		// 			而定，请留意概览页面的全局提示，只有当系统处于稳定状态时，您进行磁盘拔插操作才能保障稳定性和安全性。`
		// 			:'After changing the purpose of the disk, the system will automatically rearrange the data stored on the disk. This process runs silently in the background. In order to ensure the stability of the system, we strongly recommend that you do not unplug the disk immediately. The specific waiting time depends on the system situation. Please pay attention to the global prompt on the overview page. Only when the system is in a stable state, can you unplug the disk to ensure stability and security.',
		// 			icon: h => {
		// 				return h(
		// 					'img',
		// 					{attrs: {src: require('../../../../static/images/disk_check/16_f_ic_sure.png'),},},
		// 				)
		// 			},
		// 			btn: h => {
		// 				return h(
		// 					'a-button',
		// 					{
		// 						props: {type: 'primary',},
		// 						style: {
		// 							'background-color': '#05bcad',
		// 							'border-color': '#05bcad'
		// 						},
		// 						on: { click: () => this.$notification.close(key), },
		// 					},
		// 					this.$store.state.language=='zh'?'我知道了':'I know',
		// 				);
		// 			},
		// 			key,
		// 			onClose: close,
		// 		});
		// 	}else {
		// 		const key = `open${Date.now()}`;
		// 		this.$notification.open({
		// 			message: this.$store.state.language=='zh'?'磁盘用途更改失败':'Disk usage change failed',
		// 			description: this.$store.state.language=='zh'?
		// 			`更改磁盘用途失败，此情况可能是因为系统正在进行底层操作，请稍后重试，如依然不成功，请联系客服人员。`
		// 			:'Failed to change the purpose of the disk. This situation may be due to the underlying operation of the system. Please try again later. If it still fails, please contact the customer service personnel.',
		// 			icon: h => {
		// 				return h(
		// 					'img',
		// 					{attrs: {src: require('../../../../static/images/disk_check/16_f_ic_unsure.png'),},},
		// 				)
		// 			},
		// 			btn: h => {
		// 				return h(
		// 					'a-button',
		// 					{
		// 						props: {type: 'primary',},
		// 						style: {
		// 							'background-color': 'var(--mainRedColor)',
		// 							'border-color': 'var(--mainRedColor)'
		// 						},
		// 						on: { click: () => this.$notification.close(key), },
		// 					},
		// 					this.$store.state.language=='zh'?'我知道了':'I know',
		// 				);
		// 			},
		// 			key,
		// 			onClose: close,
		// 		});
		// 	}
		// },
	}

}
</script>
<style scoped>
.downbtn {
	background-color: var(--mainRedColor);
	border: none;
}

.downbtng {
	background-color: var(--mainGreenColor);
	border: none;
}

/* .ant-tag {
		width: 55px;
		text-align: center;
	} */
::v-deep.bigtab .table-draggable-handle {
	/* width: 10px !important; */
	height: 100% !important;
	left: auto !important;
	right: -5px;
	cursor: col-resize;
	touch-action: none;
	border: none;
	position: absolute;
	transform: none !important;
	bottom: 0;
}

::v-deep.bigtab .resize-table-th {
	position: relative;
}

.error-img,
.warn-img {
	vertical-align: text-bottom;
	margin-right: 5px;
}

.weight {
	font-weight: 700;
}

.sure-text {
	text-align: center;
	color: var(--mainRedColor);
	font-weight: 700;
	padding: 4px 0;
	background-color: rgba(253, 52, 85, 0.1);
	border-left: 2px solid var(--mainRedColor);
	margin: 15px 0 10px;
}

.font-red {
	color: var(--mainRedColor);
}

#disk-warn-btn {
	background-color: var(--mainOrangeColor);
	border-color: var(--mainOrangeColor);
}

#destroy-btn {
	width: 80px;
	background-color: var(--mainRedColor);
	border-color: var(--mainRedColor);
}

#destroy-btn[disabled] {
	color: rgba(0, 0, 0, .25);
	background-color: #f5f5f5;
	border-color: #d9d9d9;
}

.disk-usage {
	display: flex;
	justify-content: space-between;
}

.disk-usage img {
	cursor: pointer;
}
</style>import { data } from 'jquery'
import { data } from 'jquery'
import { data } from 'jquery'
import { timers } from 'jquery'

